﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>易得桌面</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #calendar
        {
            width: 900px;
            margin: 0 auto;
        }
        /*leaveInfolist 的 CSS*/
        .fc-shijia, .fc-agenda .fc-event-time, .fc-shijia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: blue;
            color: #fff;
        }
        .fc-nianjia, .fc-agenda .fc-event-time, .fc-nianjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #336600;
            color: #fff;
        }
        .fc-bingjia, .fc-agenda .fc-event-time, .fc-bingjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #669999;
            color: #fff;
        }
        .fc-chanjia, .fc-agenda .fc-event-time, .fc-chanjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #CC6699;
            color: #fff;
        }
        .fc-chuchai, .fc-agenda .fc-event-time, .fc-chuchai a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #00CC00;
            color: #fff;
        }
        .fc-tiaoxiu, .fc-agenda .fc-event-time, .fc-tiaoxiu a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #00CC99;
            color: #fff;
        }
        .fc-jianjia, .fc-agenda .fc-event-time, .fc-jianjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #996633;
            color: #fff;
        }
        .fc-hunjia, .fc-agenda .fc-event-time, .fc-hunjia a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #FF3333;
            color: #fff;
        }
        .fc-waichu, .fc-agenda .fc-event-time, .fc-waichu a
        {
            border-style: solid;
            border-color: #36c;
            background-color: #663399;
            color: #fff;
        }
        .fc-qita, .fc-agenda .fc-event-time, .fc-qita a
        {
            border-style: solid;
            border-color: #FF9912;
            background-color: #FFE384;
            color: #fff;
        }
        
        .fc-disAgreed, .fc-agenda .fc-event-time, .fc-disAgreed a
        {
            border-style: solid;
            border-color: #eee;
            background-color: gray;
            color: #fff;
        }
        .popup_block
        {
            display: none; /*--hidden by default--*/
            background: #fff;
            padding: 20px;
            border: 20px solid #ddd;
            float: left;
            font-size: 1.2em;
            position: fixed; /*--top: 50%; left: 28%;--*/
            z-index: 99999; /*--CSS3 Box Shadows--*/
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000; /*--CSS3 Rounded Corners--*/
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        #fade
        {
            /*--Transparent background layer--*/
            display: none; /*--hidden by default--*/
            background: #000;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .80;
            z-index: 9999;
        }
        .close
        {
            float: right;
            margin: -55px -55px 0 0;
        }
        .close:hover
        {
            background-color: transparent;
        }
        /*--Making IE6 Understand Fixed Positioning--*/
        *html #fade
        {
            position: absolute;
        }
        *html .popup_block
        {
            position: absolute;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
    <script type="text/javascript">


    //************* URL常量



    var URL_ATTENDANCE_LEAVER_INFO_BY_ID = '/attendance/LeaveInfoById';

    var URL_PERSONAL_LEAVE_INFO_LIST = '/attendance/PersonalLeaveInfoListPerYear';

    var URL_SIMPLEUSERINFO_BY_DEPTID = '/core/GetUserInfoInDept'



    //************* 全局变量



    var g_Var = {

        'currentDate': new Date(),
        'isBinding': false,
        'dataStorage': [],
        'yearStorage': [],
        'currentUserId': null

    };



    //************* 常量定义



    var StaticResource = {

        NotAudited: '未审核',
        AuditInfo: {
            "true": "通过审核",
            "false": "未通过审核"
        },
    };

    var memberSelector = null;

    var cssList = ['fc-shijia',
                   'fc-nianjia',
                   'fc-bingjia',
                   'fc-chanjia',
                   'fc-chuchai',
                   'fc-tiaoxiu',
                   'fc-jianjia',
                   'fc-hunjia',
                   'fc-waichu',
                   'fc-qita',
                   'fc-disAgreed'
                  ];



    var convertor = {

        "id": function (item) {
            return item.Id;
        },

        "title": function (item) {
            var mark = '(' + StaticResource.NotAudited + ')';
            var LeaveTitle;

            if (item.IsAudited) {
                LeaveTitle = item.Title;
            } else {
                LeaveTitle = item.Title + mark;
            }

            return LeaveTitle;

        },

        "start": function (item) {
            var startTime = Date.fromEpoch(item.Start);
            return startTime;

        },

        "end": function (item) {
            var endTime = Date.fromEpoch(item.End);
            return endTime;

        },

        "allDay": function (item) {
            return item.IsAllDay;
        },

        "className": function (item) {
            if(item.IsAgreed == false){
                return cssList[10]
            }
            else{
                switch (item.Title) {
                case '事假': return cssList[0];
                    break;
                case '年假': return cssList[1];
                    break;
                case '病假': return cssList[2];
                    break;

                case '产假': return cssList[3];

                    break;

                case '出差': return cssList[4];

                    break;

                case '调休': return cssList[5];

                    break;

                case '检假': return cssList[6];

                    break;

                case '婚假': return cssList[7];

                    break;

                case '外出': return cssList[8];

                    break;

                case '其他': return cssList[9];

                    break;

                }
            }
        }

    };



    //************* Accessor访问器

    var EzAccessor = {};

    if (ezmock.IS_MOCKED) {
        EzAccessor = mockEzAccessor;
    } else {
        var realEzAccessor = {
            'doShowLeaveInfo': function (leaveId) {
                $(document).ajaxBusy('begin');
                $.getJSON(
                    URL_ATTENDANCE_LEAVER_INFO_BY_ID,
                    { 'leaveId': leaveId },
                    function (e) {
                        showLeaveInfo(e);
                        $(document).ajaxBusy('end');
                    });
            },
            'doUpdateLeaveInfoList': function (currentDate) {
                $(document).ajaxBusy('begin');
                //清空数据
                $('#calendar').fullCalendar('removeEvents');
                $.getJSON(
                    URL_PERSONAL_LEAVE_INFO_LIST,
                    { 'currentDate': currentDate, 'userId': g_Var['currentUserId'] },
                    function (e) {
                        g_Var['leaveInfoListJson'] = e;
                        updateStorge();
                        bindLeaveInfoList();
                        ajustCalendarSize();
                       
                        $(document).ajaxBusy('end');
                    });
            },
            'getCurrentUser': function () {
                return <%= ViewData["CurrentUser"] %>;
            },
            'getDeptList': function () {
                return <%= ViewData["CurrentDeptList"] %>;
            },
            'getCurrentTime': function () {
                return <%= ViewData["CurrentTime"] %>;
            },
            'getIsHasPermisson': function () {
                return <%= ViewData["IsHasPermisson"] %>;
            },
        };

        EzAccessor = realEzAccessor;
    }
    ///getChineseTime
   function getChineseTime(dateTimeEpoch) {
        var blank = ' ';
        var dateTime = Date.fromEpoch(dateTimeEpoch);
        var date = dateTime.toFullChineseDateFormat();
        var time = dateTime.toFullTimeFormat();
        var chineseTime = date + blank + time
        return chineseTime;
    }

    ///mouseClickEvent
    function mouseClickEventCallback(eventData) {
        var leaveId = eventData.id;
        EzAccessor.doShowLeaveInfo(leaveId);
    }
    ///viewChangedCallback
    function viewChangedCallback(view) {
        if (!g_Var['isBinding']) {
            var calendarDate = ($('#calendar').fullCalendar('getDate'));
            var calendarYear = calendarDate.getFullYear();
            var currentYear = g_Var['currentDate'].getFullYear();
            g_Var['currentDate'] = Date.fromEpoch(calendarDate.toEpoch());
    
            if (calendarYear != currentYear) {
                updateLeaveInfoList();
            }
        }
    }

    ///ajustCalendarSize
    function ajustCalendarSize() {
        var MAX_CALENDAR_WIDTH = 700;
        var targetWidth;
        var contentWidth = $('#content').width();
        
        if (contentWidth <= MAX_CALENDAR_WIDTH) {
            targetWidth = contentWidth - 10;
        } else {

            targetWidth = MAX_CALENDAR_WIDTH;
        }
        $('#calendar').width(targetWidth + 'px');
        $('#calendar').empty();
    
        bindLeaveInfoList();
    }
    ///bindLeaveInfoList
    function bindLeaveInfoList() {
        var leaveInfoList = g_Var['dataStorage'];
        g_Var['isBinding'] = true;

        var personalLeaveInfoList = DataConverterForfullcalendar.convertfullcalendar(leaveInfoList, convertor);

        var calendarYear;
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek'
            },
            editable: false,
            events: personalLeaveInfoList,
            eventClick: mouseClickEventCallback,
            viewDisplay: viewChangedCallback
        });

        $('#calendar').fullCalendar('gotoDate', g_Var['currentDate'].getFullYear(), g_Var['currentDate'].getMonth(), g_Var['currentDate'].getDate());
        g_Var['isBinding'] = false;
    }
    ///showLeaveInfo
    function showLeaveInfo(leaveInfo) {
        var leaveInfoContent = $("<div/>");
        //假期类别
        var leaveTypeName = leaveInfo.LeaveTypeName;
        //假期申请时间
        var createDateTime = getChineseTime(leaveInfo.CreateOn);
        //假期开始时间
        var startDateTime = getChineseTime(leaveInfo.StartTime);
        //假期结束时间
        var endDateTime = getChineseTime(leaveInfo.EndTime);
        //假期理由
        var description = leaveInfo.Description;
        //是否通过审核

        var isAudited = "";
        var replaceText = $('#popContent').html();
        replaceText = replaceText.replace("{LeaveTypeName}", leaveTypeName)
                                 .replace("{CreateOn}", createDateTime)
                                 .replace("{StarTime}", startDateTime)
                                 .replace("{EndTime}", endDateTime)
                                 .replace("{Info}", description);

        if (leaveInfo.IsAudited) {
            //是否 通过
            var isAgreed = StaticResource.AuditInfo[leaveInfo.IsAgreed];
            //审核人
            var auditUserName = leaveInfo.AuditUser['Name'];
            //审核时间
            var auditDateTime = getChineseTime(leaveInfo.AuditTime);
            //审核意见
            var auditNote = leaveInfo.AuditNote;
            replaceText = replaceText.replace("{IsAgreed}", isAgreed)
                                     .replace("{AuditName}", auditUserName)
                                     .replace("{AuditTime}", auditDateTime)
                                     .replace("{AuditNote}", auditNote);
        } else {
            isAudited = StaticResource.NotAudited;
        }
        $(leaveInfoContent).html(replaceText);
        if (leaveInfo.IsAudited) {
            $('#pop_isAgreed', leaveInfoContent).show();
            $('#pop_isAudited', leaveInfoContent).hide();
        } else {
            $('#pop_isAudited', leaveInfoContent).show();
            $('#pop_isAgreed', leaveInfoContent).hide();
        }
        //popContent
        leaveInfoContent.contentsManager();
    }


    ///updateStorge 年份改变时，更新数据缓存
    function updateStorge() {
        for (var key in g_Var['leaveInfoListJson']) {
            g_Var['dataStorage'].push(g_Var['leaveInfoListJson'][key]);
        }
        g_Var['yearStorage'].push(g_Var['currentDate'].getFullYear());
    }


    ///updateLeaveInfoList 年份改变时，更新请假记录
    function updateLeaveInfoList() {
        var isIn = false;
        for (var i = 0; i < g_Var['yearStorage'].length; i++) {
            if (g_Var['yearStorage'][i] == g_Var['currentDate'].getFullYear()) {
                isIn = true;
                break;
            }
        }
        if (!isIn) {
            var date = g_Var['currentDate'].toEpoch();
            EzAccessor.doUpdateLeaveInfoList(date);
        }
    }


    ///updateTitleInfo
    function updateTitleInfo() {
        var currentMember = $('#memberSelector').memberSelector("getMember");
        var title = currentMember.Name + "的假期记录";
        $('#cmbleaveTitle').html(title);
    }

    function clearStorage() {
        g_Var['dataStorage'] = [];
        g_Var['yearStorage'] = [];
    }

    function memberChangedCallback() {
        updateTitleInfo();
        clearStorage();
        ///更新假期数据
        updateLeaveInfoList();
    }

    ///initPage

    function initPage() {

        $(document).ajaxBusy();
        EzTipsManager.addTipBox('#tip_Choose', 'tipChoose');
        EzTipsManager.addTipBox('#tip_Remind', 'tipRemind');
        EzTipsManager.addTipBox('#tip_MyLeave', 'tipMyLeave');
        

        EzTipsManager.showTipBox('tipRemind');
        EzTipsManager.showTipBox('tipMyLeave');

        var deptList = EzAccessor.getDeptList();
        var currentDate = EzAccessor.getCurrentTime();
        var currentUser = EzAccessor.getCurrentUser();
        var isHasPermisson = EzAccessor.getIsHasPermisson();



        g_Var['currentDate'] = Date.fromEpoch(currentDate);
        $('#memberSelector').memberSelector({

            //部门列表
            deptList: deptList,
            //当前用户JSON
            currentUser: currentUser,
            //selector 成员改变时的callback
            memberChanged: function (event, id) {
                g_Var['currentUserId'] = id;
                memberChangedCallback();
            }
        });
        if (isHasPermisson) {
            EzTipsManager.showTipBox('tipChoose');
        }
    }



    function initPageEvent() {
        $('#surplusLeaveTime').click(function () {
            EzTipsManager.showTipBox('tipTimeinfo');
            var TimeInfo = "您剩余假期时间为10000000000000小时";
            $('#info').html(TimeInfo);
        });
        $(window).wresize(function () {
            ajustCalendarSize();
        });
    }

    $(function () {
        initPage();
        initPageEvent();
    });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
    <div id="status-bar"><% Html.RenderPartial("_navigateTo"); %></div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head">
        <img src="../../Content/icons/calendar_blue.png" style="width: 48px; height: 48px;"
            alt="leaveInfo" />
        <span id="cmbleaveTitle"></span>
    </div>
    <div id="page-body">
        <div id="calendar" style="width: 100%;">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
    <div id="shortcuts" class="box">
        <a class="btn-shortcut" href="/attendance/applyLeave">申请假期</a>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id='tip_Remind' style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
            您可以用鼠标点击色块，查看每次假期更多的详细信息！</p>
        <table style="margin-left: 4px;">
            <tr>
                <td>
                    <span style="display: block; background: blue; width: 30px; height: 20px"></span>
                </td>
                <td>
                    事假
                </td>
                <td>
                    <span style="display: block; background: #336600; width: 30px; height: 20px"></span>
                </td>
                <td>
                    年假
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #669999; width: 30px; height: 20px"></span>
                </td>
                <td>
                    病假
                </td>
                <td>
                    <span style="display: block; background: #CC6699; width: 30px; height: 20px"></span>
                </td>
                <td>
                    产假
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #00CC00; width: 30px; height: 20px"></span>
                </td>
                <td>
                    出差(外地)
                </td>
                <td>
                    <span style="display: block; background: #00CC99; width: 30px; height: 20px"></span>
                </td>
                <td>
                    调休
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #996633; width: 30px; height: 20px"></span>
                </td>
                <td>
                    体检
                </td>
                <td>
                    <span style="display: block; background: #FF3333; width: 30px; height: 20px"></span>
                </td>
                <td>
                    婚假
                </td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: #663399; width: 30px; height: 20px"></span>
                </td>
                <td>
                    外出(本市)
                </td>
                <td>
                    <span style="display: block; background: #FFE384; width: 30px; height: 20px"></span>
                </td>
                <td>
                    其它假
                </td>
            </tr>
            <tr>
                <td>
                    <span style="display: block; background: gray; width: 30px; height: 20px"></span>
                </td>
                <td>
                    <span style="color: red">未通过审核</span>
                </td>
                <td>
            </tr>
        </table>
    </div>
    <div id='tip_MyLeave' style="display: none;" class="tip-attention">
        <h1>
            假期时间
        </h1>
        <p style="margin-left: 8px;">
            已用 <span style="font-weight: bold; color: Red;">32</span> 小时
        </p>
        <p class="indent">
            剩余 <span style="font-weight: bold; color: #090;">88</span> 小时</p>
    </div>
    <div id="tip_Choose" style="display: none;">
        <h1>
            选择员工:</h1>
        <p id="memberSelector" class="indent">
        </p>
    </div>
    <div id="popContent" style="display: none;">
        <span>假别：{LeaveTypeName}</span>
        <br />
        <span>申请时间 : {CreateOn}</span><br />
        <span>开始时间 : {StarTime}</span><br />
        <span>结束时间 : {EndTime}</span><br />
        <span>请假原因 : {Info}</span>
        <br />
        <div id="pop_isAudited" style="display: none;">
            <br />
            <span style="color: Red; font-weight: bold;">未审核</span>
        </div>
        <div id="pop_isAgreed" style="display: none;">
            <br />
            <span style="color: red; font-weight: bold;">{IsAgreed}</span><br />
            <span>审核人 : {AuditName}</span><br />
            <span>审核时间 : {AuditTime}</span><br />
            <span>审核意见 : {AuditNote}</span><br />
        </div>
    </div>
</asp:Content>
